import { mountElement } from "./mountElement"
import { updateNodeElement } from "./updateNodeElement"

/* 
模块功能：创建新节点（根据普通react元素）
*/
export function createElementDom (vdom) {
  let newEle = null
  if (vdom.type === 'text') {
    //  1.文本节点
    newEle = document.createTextNode(vdom.props.textContent)
  } else {
    //  2.元素节点
    newEle = document.createElement(vdom.type)
    // 问题六：真实节点添加属性：普通属性、事件属性
    updateNodeElement(newEle, vdom)
  }

  // vdom变为真实dom的一个属性
  newEle._vdom = vdom

  // 递归创建子节点
  vdom.children.forEach(child => {
    mountElement(child, newEle)
  })

  // ref设置
  if (vdom.props && vdom.props.ref) {
    vdom.props.ref(newEle)
  }
  return newEle
}
